<template>
  <Edialog
    title="角色配置"
    :outershow="userRole"
    @close="userClose"
    saveClick
    @saveFn="saveuserRoleFn"
  >
    <div style="padding: 0 20px">
      <el-form ref="userRole" label-width="100px">
        <el-form-item label="角色">
          <div class="accessEnd">
            <el-tree
              ref="tree"
              :data="dataOne"
              node-key="id"
              show-checkbox
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i
                  v-if="data.ab.type == 1"
                  class="el-icon-document-copy"
                  style="margin-right: 10px"
                ></i>
                <i
                  v-if="data.ab.type == 2"
                  class="el-icon-s-check"
                  style="margin-right: 10px"
                ></i>
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </Edialog>
</template>

<script>
let id = 1000
import Edialog from '@/components/Edialog'
import {
  getqueryByMemId,
  getSysRoleCurrTree,
  postSysMemberRole
} from '@/api/management/user'
import { fd } from '@/utils'
export default {
  components: {
    Edialog
  },
  data () {
    return {
      dataOne: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      clickUserId: '',
      userRole: false
    }
  },
  methods: {
    // 角色
    async open (id) {
      this.clickUserId = id
      let res = await getSysRoleCurrTree()
      console.log(res)
      this.userRole = true
      if (res.code == 0 && res.data.bcode == 0) {
        this.dataOne = this.arrayToTree(res.data.bdata, null)
        let data = await getqueryByMemId(id)
        if (data.data.bdata != []) {
          let a = data.data.bdata.map(item => item.roleName)
          let arr = []
          res.data.bdata.forEach(item => {
            if (a.includes(item.name)) arr.push(item.id)
          })
          this.$refs.tree.setCheckedKeys(arr)
        }
      }
    },
    arrayToTree (arr, pid) {
      const list = []
      arr.forEach(v => {
        if (v.pid === pid) {
          list.push(v)
          const children = this.arrayToTree(arr, v.id)
          if (children.length) v.children = children
        }
      })
      return list
    },
    async saveuserRoleFn () {
      // 选中的
      let node = this.$refs.tree.getCheckedNodes()
      console.log('node', node)
      if (node.length == 0) {
        return this.$message.error('请先选择！')
      }
      let result = []
      node.forEach(item => {
        if (item.ab.type == 2) {
          result.push(item.id)
        }
      })
      let res = await postSysMemberRole(
        fd({
          memId: this.clickUserId,
          roleIdStrs: result.join()
        })
      )
      if (res.code == 0 && res.data.bcode == 0) {
        this.$message.success('操作成功')
        this.userRole = false
      }
      this.$refs.tree.setCheckedKeys([])
    },
    userClose () {
      this.userRole = false
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style scoped lang="scss">
.accessEnd {
  padding: 10px;
  border: 1px solid #ccc;
  height: 60vh;
}
</style>
